<script setup>
import { ref,reactive,unref,watch } from 'vue'
import { ElMessageBox } from 'element-plus'
import useMenusStore from '../../store/menusStore'
import { ElementPlus } from '@element-plus/icons-vue'
const menusStore = useMenusStore()

const editId = ref('')

let menuForm = reactive({
  pid: 0, // 上级编号
  type: 1, // 1 目录， 2 菜单
  title: "", // 标题
  icon: "", // 图标
  url: "", // 链接
  status: 1, // 1 可用  2 禁用
})
const rules = reactive({
  pid: { required: true, message: "请选择上级菜单", trigger: "blur" },
  type: { required: true, message: "请选择菜单类型", trigger: "blur" },
  title: { required: true, message: "请输入菜单标题", trigger: "blur" },
  status: { required: true, message: "请选择菜单状态", trigger: "blur" }
})
const formRef = ref(null)

watch(() => menuForm.pid, (val) => {
  if (val === 0) {
    menuForm.type = 1;
    menuForm.url = '';
  } else {
    menuForm.type = 2;
    menuForm.icon = '';
  }
})

// 接收父组件数据
const acceptValue = (value) => {
  menuForm = reactive({...value})
}


// 导出父组件需要用的属性与方法
defineExpose({
  editId,menuForm,acceptValue
})

// 重置表单
const resetForm = () => {
  editId.value = ''
  // let form = unref(formRef)
  // form.resetFields()
  menuForm = reactive({
    pid: 0, // 上级编号
    type: 1, // 1 目录， 2 菜单
    title: "", // 标题
    icon: "", // 图标
    url: "", // 链接
    status: 1, // 1 可用  2 禁用
  })
  // 关闭对话框
  menusStore.closeDialog()
}
// 提交表单
const submitForm = () => {
  // console.log(menuForm,'menuForm------')
  let form = unref(formRef)
  form.validate((valid) => {
    if (valid) {
      // console.log('submit!')
      if(editId.value) {
        // 编辑
        // console.log(editId,'编辑-----')
        menusStore.editMenuAction({...menuForm,id: editId.value})
      } else {
        // console.log('新增----')
        menusStore.addMenuAction(menuForm)
      }
      // 重置表单
      resetForm()
    } else {
      // console.log('error submit!')
      return false
    }
  })
}

const handleClose = (done) => {
  ElMessageBox.confirm('你确定要关闭吗？')
    .then(() => {
      done()
      resetForm()
    })
    .catch(() => {
      // catch error
    })
}
</script>

<template>
  <!-- 对话框 -->
  <el-dialog
    v-model="menusStore.dialogVisible"
    :title="editId? '编辑菜单':'新增菜单'"
    width="30%"
    :before-close="handleClose"
  >
    <!-- <span>This is a message</span> -->
    <el-form
      :model="menuForm"
      label-width="100px"
      ref="formRef"
      :rules="rules"
      class="demo-menuForm"
    >
      <el-form-item label="上级菜单" prop="pid">
        <el-select v-model="menuForm.pid">
          <el-option :value="0" label="顶级菜单"></el-option>
          <el-option
            v-for="menu in menusStore.menuData.list"
            :key="menu.id"
            :value="menu.id"
            :label="menu.title"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="菜单类型" prop="type">
        <el-radio-group v-model="menuForm.type">
          <el-radio
            :label="1"
            :disabled="menuForm.pid !== 0"
          >目录</el-radio>
          <el-radio
            :label="2"
            :disabled="menuForm.pid === 0"
          >菜单</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="菜单名称" prop="title">
        <el-input
          v-model="menuForm.title"
          placeholder="请输入菜单名称"
          auto-complete="off"
        />
      </el-form-item>
      <el-form-item label="菜单图标" prop="icon" v-if="menuForm.type === 1">
        <el-select v-model="menuForm.icon">
          <el-option value="ElementPlus">
            <!-- <span :icon="ElementPlus"></span> -->
            <el-icon><ElementPlus /></el-icon>
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="菜单链接" prop="url" v-if="menuForm.type === 2">
        <el-input
          v-model="menuForm.url"
          placeholder="请输入菜单链接"
          auto-complete="off"
        />
      </el-form-item>
      <el-form-item label="菜单状态" prop="status">
        <el-radio-group v-model="menuForm.status">
          <el-radio :label="1">启用</el-radio>
          <el-radio :label="2">禁用</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="resetForm">取消</el-button>
        <el-button type="primary" @click="submitForm">{{ editId? '编辑菜单':'新增菜单' }}</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped>

</style>
